<template>
  <common-page title="注册新账号">
    <el-steps :active="stepActive" simple finish-status="success">
      <el-step title="基础信息" />
      <el-step title="详细信息" />
      <el-step title="完成注册" />
    </el-steps>
    <el-form v-if="stepActive == 0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
      <el-form-item label="登录账号" prop="user">
        <el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
        <div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
        <sc-password-strength v-model="form.password"></sc-password-strength>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
      </el-form-item>
      <el-form-item label="" prop="agree"> <el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree = true">《平台服务协议》</span> </el-form-item>
    </el-form>
    <el-form v-if="stepActive == 1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
      <el-form-item label="真实姓名" prop="userName">
        <el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
      </el-form-item>
      <el-form-item label="账号类型" prop="userType">
        <el-radio-group v-model="form.userType">
          <el-radio-button label="1">企业开发者</el-radio-button>
          <el-radio-button label="2">企业开发者</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开通类别" prop="open">
        <el-checkbox-group v-model="form.open">
          <el-checkbox label="1">云存储API</el-checkbox>
          <el-checkbox label="2">云检索API</el-checkbox>
          <el-checkbox label="3">Javescript API</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <div v-if="stepActive == 2">
      <el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
        <template #extra>
          <el-button type="primary" @click="goLogin">前去登录</el-button>
        </template>
      </el-result>
    </div>
    <el-form style="text-align: center">
      <el-button v-if="stepActive > 0 && stepActive < 2" @click="pre">上一步</el-button>
      <el-button v-if="stepActive < 1" type="primary" @click="next">下一步</el-button>
      <el-button v-if="stepActive == 1" type="primary" @click="save">提交</el-button>
    </el-form>
    <el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
      平台服务协议
      <template #footer>
        <el-button @click="showAgree = false">取消</el-button>
        <el-button type="primary" @click="(showAgree = false), (form.agree = true)">我已阅读并同意</el-button>
      </template>
    </el-dialog>
  </common-page>
</template>

<script>
import scPasswordStrength from '@/components/scPasswordStrength'
import commonPage from './components/commonPage'

export default {
  components: {
    commonPage,
    scPasswordStrength,
  },
  data() {
    return {
      stepActive: 0,
      showAgree: false,
      form: {
        user: '',
        password: '',
        password2: '',
        agree: false,
        userName: '',
        email: '',
        userType: '1',
        open: [],
      },
      rules: {
        user: [{ required: true, message: '请输入账号名' }],
        password: [{ required: true, message: '请输入密码' }],
        password2: [
          { required: true, message: '请再次输入密码' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'))
              } else {
                callback()
              }
            },
          },
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请阅读并同意协议'))
              } else {
                callback()
              }
            },
          },
        ],
        userName: [{ required: true, message: '请输入真实姓名' }],
        email: [{ required: true, message: '请输入邮箱地址' }],
        userType: [{ required: true, message: '请选择账户类型' }],
        open: [{ required: true, message: '请选择开通类别' }],
      },
    }
  },
  mounted() {},
  methods: {
    pre() {
      this.stepActive -= 1
    },
    next() {
      const formName = `stepForm_${this.stepActive}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stepActive += 1
        } else {
          return false
        }
      })
    },
    save() {
      const formName = `stepForm_${this.stepActive}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stepActive += 1
        } else {
          return false
        }
      })
    },
    goLogin() {
      this.$router.push({
        path: '/login',
      })
    },
  },
}
</script>

<style scoped></style>
